<!--
背景
    可以给任何标签元素添加背景样式。

    1）背景颜色
        background-color
            - 颜色（rgb、预定义颜色、十六进制）
            - transparent（不写的情况，即默认值，表示透明色）
    

    2）背景图片
        background-image
            - none                 // 默认值。
            - url(相对/绝对路径)    // 有没有引号都行。
        应用场景：超大背景图、装饰小图片、logo图；
                 以上场景一般不用img标签，而是用背景图css样式，
                 因为css背景图更容易控制位置，例如精灵图。
        图片三种：
            a、img图片标签
            b、css背景图样式
            c、font字体图片样式
    

    3）背景平铺
        background-repeat
            - repeat        // 默认值。平铺，反复。
            - no-repeat
            - repeat-x
            - repeat-y
        注意：背景颜色、背景图片同时存在，图片在上方。


    4）背景图片位置
        图片在背景容器中的位置x轴、y轴。
        background-position: x y;
            - 方位名词（x：left、right、center；y：top、bottom、center）
            - 精确坐标（数值+单位）
            - 百分比
        注意：
            a、若是方位名词，则x、y顺序随意
                【top left】等同于
                【left top】
            b、若只写一个方位名词，则另一个默认是center
                【center】等同于
                【center center】
                【left】等同于
                【left center】、【center left】
            c、若是精确坐标，则第一个必须是x坐标，第二个必须是y坐标
                【10px 100px】
                【100px 10px】属于两个完全不同的坐标
            d、若只写一个精确单位，则另一个默认是center
                【10px】等同于
                【10px center】
            e、混合单位（精确、方位混用），第一个必须是x坐标，第二个必须是y坐标
                【center 10px】
                【10px center】属于两个完全不同的坐标


    5）背景图片固定/附着
        background-attachment
            - fixed     内容动、背景固定不动
            - scroll    内容动、背景跟随滚动
        应用场景：视差滚动效果。
        测试时，页面元素内容要多，至少多到窗口出现滚轮的情况，这样才能观察到效果


    6）背景复合写法（简写）
            background: 颜色 url 平铺 附着 位置
        注意：
            a、顺序没有要求，但建议按上面的习惯来写；
            b、不写的，会取得默认值.
    
    拓展：附着【fixed】会有显示问题，可能导致图片不在背景容器盒子中显示出来
    原因如下
        a、属性值fixed是相对于【可视区】来说的，不是相对于【背景容器盒子】来说的，
        b、容器盒子太小或背景图太小，且又设置为只剩一张图（no-repeat），
        c、倘若位置设为【0 center】，你自然不会在盒子里看到图片了，因为图片此时在可视区里居中显示！
        d、超出盒子的可视区范围是不会看到图片的。
    类比：当前显微镜的视镜范围 VS 整个载玻片的观察区域
            

    7）背景颜色半透明（CSS3新增的，IE9+才支持）
            background: rgba(red, green, blue, alpha);
        注意：
            1）前面是三原色，取值[0, 255]，而alpha是透明度的意思，取值[0, 1]
            2）透明的是盒子背景，盒子里的内容不受影响
            3）小数点前面的0可以省略，【0.5】可以写为【.5】
-->

<style>
    div {
        width: 200px;
        height: 200px;

        /* background-color: cyan;

        background-image: url(./resources/pictures/logo.png);

        background-repeat: no-repeat; */

        /* 相同的 */
        /* background-position: bottom right; */
        /* background-position: right bottom; */
        /* 等同于【right center】 */
        /* background-position: right; */
        /* 不同的坐标 */
        /* background-position: 10px 20px; */
        /* background-position: 20px 10px; */
        /* 等同于【0 center】 */
        /* background-position: 0; */

        /* 简写 */
        background: cyan url(./resources/pictures/logo.png) no-repeat fixed 20px center;
    }
    h4 {
        width: 50px;
        height: 50px;
        /* 全透明 */
        /* background: rgba(0, 0, 0, 0); */
        /* 稍微透明 */
        background: rgba(255, 0, 0, .3);
        /* 半透明 */
        /* background: rgba(0, 0, 0, .5); */
        /* 不透明 */
        /* background: rgba(0, 0, 0, 1); */
    }
</style>

<div>hello world</div>
<h4>背景透明测试</h4>